<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个TodoList</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="container">
        <div class="main">
            <div class="function">
                <input type="text" id="todo-ipt" placeholder="输入任务...">
                <button id="todo-btn" onclick="submitTodo()">发 布</button>
            </div>
            <ul class="todo-ul"></ul>
        </div>
        <div class="tip">
            <span class="tip-text">这是提示消息</span>
            <span class="tip-delete" onclick="deleteTip(this)">
                <svg class="icon svg-icon" aria-hidden="true">
                    <use xlink:href="#icon-shanchu"></use>
                </svg>
            </span>
        </div>
    </div>
    <script type="html/text" id="tmpl">
        <li class="todo-li" data-grd="${importance}">
            <div class="todo-check">
                <span class="icon-undo" onclick="Done(this)"></span>
            </div>
            <div class="todo-text">${todoText}</div>
            <div class="todo-menu">
                <div class="icon-more" onclick="showTools(this)">
                    <svg class="icon svg-icon icon-more-svg" aria-hidden="true">
                        <use xlink:href="#icon-gengduo"></use>
                    </svg>
                </div>
            </div>
            <div class="todo-menutool">
                <div class="tools">
                    <div class="tool tools-edit" onclick="editTodo(this)">
                        <svg class="icon svg-icon" aria-hidden="true">
                            <use xlink:href="#icon-bianji"></use>
                        </svg>
                    </div>
                    <div class="tool tools-delete" onclick="deleteTodo(this)">
                        <svg class="icon svg-icon" aria-hidden="true">
                            <use xlink:href="#icon-shanchu"></use>
                        </svg>
                    </div>
                    <div class="tool tools-up" onclick="upTodo(this)">
                        <svg class="icon svg-icon" aria-hidden="true">
                            <use xlink:href="#icon-jiantouxia"></use>
                        </svg>
                    </div>
                    <div class="tool tools-down" onclick="downTodo(this)">
                        <svg class="icon svg-icon" aria-hidden="true">
                            <use xlink:href="#icon-jiantoushang"></use>
                        </svg>
                    </div>
                    <div class="tool tools-first" onclick="topTodo(this)">
                        <svg class="icon svg-icon" aria-hidden="true">
                            <use xlink:href="#icon-zhiding"></use>
                        </svg>
                    </div>
                    <div class="tool tools-last" onclick="floorTodo(this)">
                        <svg class="icon svg-icon" aria-hidden="true">
                            <use xlink:href="#icon-zhidi"></use>
                        </svg>
                    </div>
                </div>
                <div class="colors">
                    <div class="tool colors-red" onclick="changeImportance(this, 1)">
                        <svg class="icon svg-icon" aria-hidden="true">
                            <use xlink:href="#icon-circle"></use>
                        </svg>
                    </div>
                    <div class="tool colors-orange" onclick="changeImportance(this, 2)">
                        <svg class="icon svg-icon" aria-hidden="true">
                            <use xlink:href="#icon-circle"></use>
                        </svg>
                    </div>
                    <div class="tool colors-white" onclick="changeImportance(this, 3)">
                        <svg class="icon svg-icon" aria-hidden="true">
                            <use xlink:href="#icon-circle"></use>
                        </svg>
                    </div>
                </div>
            </div>
        </li>
    </script>
    <script src="./index.js"></script>
    <script src="./icon/iconfont.js"></script>
</body>
</html>